<template>
  <div class="settle-log">
    <el-timeline class="not-icon-timeline timeline-style">
      <el-timeline-item
        v-for="(item) in logList"
        :key="item.timestamp"
        :timestamp="item.timestamp"
        placement="top"
        color="#fff">
        <div v-for="(j, index) in item.children" :key="index" class="opeator-item">
          <div class="sub-title" style="margin-right:10px;">{{ j.operatorUser }}</div>
          <div class="content" style="width: 250px;">
            <div class="flex">
              <el-tooltip class="item" placement="top" effect="dark">
                <div slot="content" style="max-width: 200px;">{{ j.operatorContent || '--' }}</div>
                <div>{{ j.operatorContent || '--' }}</div>
              </el-tooltip>
              <img v-if="j.operatorContent === '审批已通过'" :src="complete" class="icon" alt="">
              <img v-if="j.operatorContent === '审批已驳回'" :src="errorIcon" class="icon" alt="">
              <img v-if="j.operatorContent === '重新提交审批'" :src="wait" class="icon" alt="">
            </div>
            <el-tooltip v-if="j.orderPrice && j.orderNum && j.remark" class="item" placement="top" effect="dark">
              <div slot="content" style="max-width: 200px;">{{ j.remark }}</div>
              <div v-if="j.remark" class="remark" style="margin-top:7px;color:#E54C4C;font-size:12px;">{{ j.remark }}</div>
            </el-tooltip>
          </div>
          <div v-if="j.orderPrice && j.orderNum" class="price" style="width: 230px;">订单总金额: <span class="num">{{ (j.orderPrice/100) | moneyFilter }}元</span></div>
          <div v-if="j.orderPrice && j.orderNum" class="price">订单数: <span class="num">{{ j.orderNum | moneyFilter }}</span></div>
          <span style="flex:1"/>
          <div class="time">{{ j.time | format("YYYY/MM/DD HH:mm:ss ") }}</div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import complete from '@/assets/auditProcess/status4.png';
import errorIcon from '@/assets/icon_delete.png';
import wait from '@/assets/auditProcess/status4.png';

import { format } from '@/filters/date';
import { moneyFilter } from '@/filters/number';
export default {
  filters: { format, moneyFilter },
  props: {
    logData: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      complete, errorIcon, wait
    };
  },
  computed: {
    logList: {
      get() {
        const logData = this.logData;
        if (!logData || logData.length === 0) return [];
        const timestampArr = [];
        const result = [];
        logData.forEach(i => {
          const timestamp = format(i.time, 'YYYY/MM/DD');
          if (!timestampArr.includes(timestamp)) {
            timestampArr.push(timestamp);
            result.push({ timestamp: timestamp, children: [i] });
          } else {
            const current = result.find(j => j.timestamp === timestamp);
            if (current) {
              current.children.push(i);
            }
          }
        });
        return result;
      },
      set() {}
    }
  },
  created() {
    this.$nextTick(() => {
      this.handelData();
    });
  },
  methods: {
    handelData() {
      const logData = this.logData;
      if (!logData || logData.length === 0) return;
      const timestampArr = [];
      const result = [];
      logData.forEach(i => {
        const timestamp = format(i.time, 'YYYY/MM/DD');
        if (!timestampArr.includes(timestamp)) {
          timestampArr.push(timestamp);
          result.push({ timestamp: timestamp, children: [i] });
        } else {
          const current = result.find(j => j.timestamp === timestamp);
          if (current) {
            current.children.push(i);
          }
        }
      });
      this.logList = result;
    }
  }
};
</script>

<style lang="scss" scoped>
.timeline-style {
  padding-left: 88px;
  &::v-deep {
    .el-timeline-item__wrapper {
      .el-timeline-item__timestamp.is-top {
        position: absolute;
        left: -88px;
        color: #666666;
        font-size: 14px;
        top: -3px;
      }
    }
    .el-timeline-item {
      padding-bottom: 12px;
      padding-top: 12px;
      .el-timeline-item__tail {
        border-left: 1px solid #DDDDDD;
      }
      &::after {
        content: '';
        background-color: #EDEEF2;
        width: calc(100% - 24px);
        position: absolute;
        bottom: 0;
        left: 24px;
        height: 1px;
      }
      &:last-child {
        padding-bottom: 0px;
        &::after {
          display: none;
        }
      }
    }
    .el-timeline-item__node {
      left: 0px;
      border: 2px solid #FD8546;
      width: 9px;
      height: 9px;
    }
  }
}
.settle-log {
  .opeator-item {
    opacity: 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 15px;
    // margin-left: 5px;
    padding-left: 0;
    .sub-title {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .content {
      font-size: 14px;
      color: #666;
    }
    .price {
      font-size: 14px;
      color: #666666;
      .num {
        font-weight: 600;
        color: #333333;
      }
    }
    .time {
      text-align: right;
        color: #999;
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .icon {
    width: 16px;
    width: 16px;
    margin-left: 5px;
  }
}
.remark {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
